<script setup lang="ts">
defineOptions({
  name: "abnormalInfo"
});

import { ref, inject, computed } from "vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import abnormalInfoSearch from "./abnormalInfoSearch.vue";
import abnormalInfoList from "./abnormalInfoList.vue";
import { queryFabAlarmList } from "@/api/modules/fab";
import { useFabDetailSocket } from "@/hooks/useWebSocket";

const routerQuery = inject("routerQuery", ref<Record<string, any>>({}));

const props = withDefaults(defineProps<{ title?: string; isEqpIdSelect?: boolean }>(), {
  title: "异常信息",
  isEqpIdSelect: false
});

const params = ref<Record<string, any>>({});
const currentData = ref<Record<string, any>>(null);
const page = ref<Record<string, number>>({
  pageNum: 0,
  pageSize: 15
});
const abnormalInfoData = ref<Array<any>>([]);
const searchLoading = ref<boolean>(false);
const loading = ref<boolean>(false);

const isShowMore = computed(() => {
  if (!currentData.value) return false;
  return currentData.value.pageSize * currentData.value.pageNum < currentData.value.total;
});

const abnormalInfoSearchChangeHandler = async (p: Record<string, any>) => {
  page.value = {
    pageNum: 0,
    pageSize: 15
  };
  params.value = { ...p };
  abnormalInfoData.value.splice(0);
  await queryFabAlarmListFn();
};

const queryFabAlarmListFn = async () => {
  loading.value = true;
  const res = await queryFabAlarmList({ ...params.value, ...page.value }, () => {
    loading.value = false;
  });
  loading.value = false;
  if (!res) return;
  currentData.value = res;
  abnormalInfoData.value.push(...res.data);
};

const initSocketFn = () => {
  const { eqpId = "" } = routerQuery.value;
  // const eqpId = "YCCDA20";
  useFabDetailSocket(!props.isEqpIdSelect, "FAB_DETAIL_ALARM", eqpId, jsonStr => {
    if (jsonStr) {
      const list = JSON.parse(jsonStr);
      if (!list?.length) return;
      abnormalInfoData.value = list.reduce(
        (pre, cur) => {
          const index = pre.findIndex(item => item.alarmId === cur.alarmId);
          if (index > -1) {
            pre[index] = cur;
          } else {
            pre.unshift(cur);
          }
          return pre;
        },
        [...abnormalInfoData.value]
      );
    }
  });
};

initSocketFn();
</script>

<template>
  <modelBox :title="title">
    <div v-loading="searchLoading" class="abnormal-info-content">
      <div class="abnormal-info-search">
        <abnormalInfoSearch v-model:loading="searchLoading" :isEqpIdSelect="isEqpIdSelect" @change="abnormalInfoSearchChangeHandler" />
      </div>
      <div v-if="!!abnormalInfoData?.length" v-loading="loading" class="abnormal-info-list">
        <abnormalInfoList v-model:pageNum="page.pageNum" :data="abnormalInfoData" :isShowMore="isShowMore" @loadMore="queryFabAlarmListFn" />
      </div>
      <div v-else class="abnormal-info-empty">
        <px-empty class="px-empty-common" />
      </div>
    </div>
  </modelBox>
</template>

<style lang="scss" scoped>
.abnormal-info-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding-top: 6px;

  .abnormal-info-search {
    width: 100%;
  }

  .abnormal-info-list {
    flex: 1;
    width: 100%;
    height: 0;
  }

  .abnormal-info-empty {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
